<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="payCont">
		<view class="contA marin25">
			<view class="cont-paycont">
				<!-- 店名start -->
				<!-- <view class="packBusiness "> -->
				<view class="foodpackbu-litm">
					<!-- <view class="foodpackbu-top"> -->
					<image :src="baseOssUrl2 + form.headPhoto " class="fd-img" mode=""></image>
					<view class="itempack-right">
						<view class="title-cont">
							<text class="tit-name">{{form.mname}}</text>
							<image :src="baseOssUrl2 + 'icon/rightJt.png' " class="img-jt" mode="" @click="goFoodPack"></image>
						</view>
						<view class="ratebu-cont">
							<view class="ratebu-textA">
								<text class="addres-text">周一至周日</text>
								<text>免预约</text>
							</view>
						</view>
						<view class="addres-cont">
							<view class="addres-textA">
								<text class="addres-text">随时退</text>
								<text class="addres-text">过期自动退</text>
								<text class="addres-text">到店</text>
							</view>
						</view>
						<view class="subtotalA">
							<text class="subtotal-price">¥{{form.money}}</text>
						</view>
					</view>
					<view style="color: red;font-size: 28rpx;" v-if="form.zt == 0 && form.cancelTime">
						订单在{{form.cancelTime}}后自动取消
					</view>
					<!-- </view> -->
				</view>
				<!-- </view> -->
				<!-- end -->
			</view>
			<!-- 二维码 -->
			<view class="buy-code" v-if="form.zt == 1">
				<view class="yuan1" :class="[codeType == 0?'yuan1-ty0':'yuan1']">

				</view>
				<view class="yuan2" :class="[codeType == 0?'yuan2-ty0':'yuan2']">

				</view>
				<view class="img-border">
					<image :src="form.ewm " mode=""></image>
				</view>

			</view>
			<!-- 卷码信息 codeType-->
			<template v-if="codeType == 0 && form.zt != 0">
				<view class="code-information">
					<text class="info-text">券码信息 <text v-if="form.zt == 1">（1张可用）</text> </text>
					<fui-button  v-if="form.zt == 1" text="申请退款" background="#fff" width='154rpx' height='60rpx' radius='50rpx'size="26"
					 borderColor="#7E7E7D" color="#1D1D1D" @click="qxBnt()"></fui-button>
				</view>
				<view class="code-time">
					<text class="time-l">{{form.jzsj}}</text>
					<text>到期</text>
				</view>
				<view class="code-number">
					<text>订单号·{{form.number}}</text>
					<text class="code-used" v-if="form.zt == 1">待使用</text>
					<text class="code-used" v-if="form.zt == 3">申请退款中</text>
				</view>
			</template>
			<template v-if="codeType == 1">
				<view class="code-information">
					<text class="info-text">券码信息 </text>
				</view>
				<view class="code-number1">
					<text class="number-ty1">订单号·{{form.number}}</text>
					<text class="code-used1">已使用</text>
				</view>
			</template>
			<template v-if="codeType == 2">
				<view class="code-information">
					<text class="info-text">券码信息 </text>
				</view>
				<view class="code-number1">
					<text class="number-ty1">订单号·{{form.number}}</text>
					<text class="code-used1">已退款</text>
				</view>
			</template>
		</view>
		<!-- 商家 -->
		<!-- <view class="business marin25">
			<view class="bus-cont">
				<text class="bus-name">莱真烤肉</text>
				<view class="bus-lx">
					<image :src="baseOssUrl+'icon/tel-phone.png' " mode=""></image>
					<text>联系商家</text>
				</view>
			</view>
			<view class="bus-yingye">
				<image :src="baseOssUrl + 'icon/time-img.png'" mode=""></image>
				营业中 08:00-00:00
			</view>
			<view class="bus-addres">
				<image :src="baseOssUrl + 'icon/addres-img.png'" mode=""></image>
				{{form.adddress}}
			</view>
		</view> -->
		<!-- end -->
		<!-- 到店吃套餐 -->
		<view class="foodPackEat marin25">
			<view class="eat-title">
				到店吃套餐
			</view>
			<view class="" v-for="(eatItem,eatindex) in form.content" :key="eatindex">
				<view class="food-title">
					{{eatItem.name}}
				</view>
				<view class="food-list">
					<view class="food-item" v-for="(foodItem,index) in eatItem.list" :key='index'>
						<view class="food-left">
							<text>{{foodItem.name}}</text>
							<text class="item-num">（1份）</text>
						</view>
						<view class="food-right">
							￥{{foodItem.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 温馨提示 -->
		<view class="reminder marin25">
			<view class="rem-title">
				温馨提示
			</view>
			<view class="rem-cont">
				<view class="rem-item">
					<text class='item-k'>有效期</text>
					<text class='item-v v1'>{{form.yxq}}日内可使用
					<text v-if="form.ifJjr == 0">(节假日可用)</text>
					<text v-if="form.ifJjr == 1">(节假日不可用)</text></text>
				</view>
				<view class="rem-item">
					<text class='item-k'>使用时间</text>
					<text class='item-v'>{{form.sysj}}小时可用</text>
				</view>
				<view class="rem-item">
					<text class='item-k'>使用规则</text>
					<view class='item-v item-vlist'>
						{{form.sygz}}
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 订单信息 -->
		<view class="order-info marin25">
			<view class="order-title">
				订单信息
			</view>
			<view class="order-cont">
				<view class="order-item">
					<text class='order-ik'>订单号</text>
					<view class="order-iv">
						<text class=''>{{form.number}}</text>
						<text class='order-icopy' @click="fzBnt()" >复制</text>
					</view>
				</view>
				<view class="order-item">
					<text class='order-ik'>手机号</text>
					<text class='order-iv'>{{form.phone}}</text>
				</view>
				<view class="order-item">
					<text class='order-ik ik1'>下单时间</text>
					<text class='order-iv'>{{form.jzsj}}</text>
				</view>
				<view class="order-item">
					<text class='order-ik ik2'>数量</text>
					<text class='order-iv'>1</text>
				</view>
				<view class="order-item">
					<text class='order-ik ik3'>总价</text>
					<text class='order-iv'>¥{{form.money}}</text>
				</view>

			</view>
		</view>
		<!-- end -->
		<view class="bnts-box" @click="fkBnt(form.id)" v-if="form.zt == 0">
			<view class="bnrt">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				form:{},
				id:'',
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				eatList: [{
					name: "·特色美食",
					foodItemList: []
				}, {
					name: "·清爽饮品",
					foodItemList: []
				}],
				codeType: 0 //0未使用 1已使用 2已退款
			}
		},
		onLoad(params) {
			this.id = params.id
			this.getSelectCyOrderDetailed()
						
		},
		onShow() {
			this.getSelectCyOrderDetailed()
		},
		methods: {
			// 付款
			fkBnt() {
				this.$http.post(this.$httpApi.ordeWxPay + "?userId=" + uni.getStorageSync('userinfo').userId + "&number=" + this.form.number).then(res => {
					this.orderIddd = res.orderId
					if (res.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.response.timeStamp,
							nonceStr: res.response.nonceStr,
							package: 'prepay_id=' + res.response.prepayId,
							signType: 'MD5',
							paySign: res.response.paySign,
							success: res => {
								uni.showToast({
									title: '购买成功！',
									duration: 2000
								});
								setTimeout(res=>{
									uni.redirectTo({
										url: '/pages/writing/orderDtail/index?id=' + this.orderIddd
									})
								},1000)
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			qxBnt() {
				uni.showModal({
					title: '提示',
					content: '确定申请退款吗',
					success:  (res)=> {
						if (res.confirm) {
							this.$http.post(this.$httpApi.ordersqtk, {
								data: {
									// id: 320,
									id: this.id, 
								}
							}).then(res => {
								uni.showToast({
									title: '提交申请成功！',
									duration: 2000
								});
								setTimeout(res=>{
									uni.redirectTo({
										url:'/pages/order/index'
									})
								},1000)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			fzBnt() {
				uni.setClipboardData({
					data: this.form.number,//要被复制的内容
					success:() => {//复制成功的回调函数
						uni.showToast({//提示
							title:'复制成功' 
						})
					}
				});
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			goFoodPack() {
				uni.navigateTo({
					url: '/pages/fpackageDetails/index'
				})
			},
			getSelectCyOrderDetailed(){
				this.$http.get(this.$httpApi.selectCyOrderDetailed, {
					data: {
						// id: 320,
						id: this.id, 
					}
				}).then(res => {
					this.form = res.order
					this.form.content = JSON.parse(this.form.content.replace(/'/g, '"'))
					console.log(this.form.content,'this.form.content')
					console.log(res,'ressss');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payCont {
		height: 100%;
		background: #EFEFEF;
		padding: 24rpx 0 80rpx;

		.contA {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			position: relative;

			.cont-paycont {
				// color: #35743D;
				display: flex;
				position: relative;

				.cont-buy {
					font-size: 40rpx;
					font-weight: 500;
					margin-bottom: 24rpx;
				}

				.succes-text {}

				// 店名start
				// .packBusiness {
				// margin-top: 26rpx;

				.foodpackbu-litm {
					background-color: #FFFFFF;
					border-radius: 16rpx;
					// margin-bottom: 30rpx;
					// padding: 24rpx;
					font-size: 28rpx;
					display: flex;
					padding-bottom: 10rpx;
					margin-bottom: 55rpx;
					// .foodpackbu-top {
					// 	display: flex;
					// 	// padding-bottom: 10rpx;
					// 	margin-bottom: 55rpx;

					.fd-img {
						width: 220rpx;
						height: 210rpx;
					}

					.itempack-right {
						// background-color: skyblue;
						width: 65%;
						margin-left: 24rpx;
						line-height: 50rpx;

						.title-cont {
							display: flex;
							justify-content: space-between;
							font-size: 28rpx;
							font-weight: bold;

							.tit-name {
								color: #1D1D1D;
							}

							.img-jt {
								position: absolute;
								right: 10rpx;
								width: 10rpx;
								height: 18rpx;

							}
						}



						.addres-cont {
							color: #969696;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.addres-textA {
								font-size: 24rpx;

								.addres-text {
									margin-right: 15rpx;
								}
							}


							.addres-compute {
								display: flex;
								align-items: center;

								image {
									width: 36rpx;
									height: 36rpx;
								}
							}


						}

						.subtotalA {
							display: flex;
							justify-content: flex-start;

							.subtotal-price {
								color: #D93C3C;
								font-size: 32rpx;
								font-weight: bold;
							}
						}

						// 时间
						.ratebu-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.addres-text {
								margin-right: 15rpx;
							}

							.addres-textA {
								font-size: 24rpx;

							}


						}

						// }
					}
				}

				// }

				// end
			}

			.buy-name {
				font-size: 30rpx;
				font-weight: bold;
				margin: 63rpx 0;

				.b-title {
					margin-bottom: 16rpx;
				}

			}

			.buy-code {
				display: flex;
				justify-content: center;
				border-top: 1px dashed #BFD3C2;
				margin-bottom: 45rpx;

				.img-border {
					margin-top: 18rpx;
					width: 264rpx;
					height: 264rpx;
					border: 1rpx dashed #BFD3C2;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 240rpx;
						height: 240rpx;

					}
				}

				.yuan1 {
					position: absolute;
					top: 36%;
					left: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
			
				.yuan2 {
					position: absolute;
					top: 36%;
					right: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
				.yuan1-ty0{
					position: absolute;
					top: 32%;
					left: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
				
				.yuan2-ty0{
					position: absolute;
					top: 32%;
					right: -35rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 70rpx;
					height: 70rpx;
				}
			}

			// 卷码信息
			.code-information {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 6rpx;

				.info-text {
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.code-time {
				color: #707070;
				font-size: 24rpx;
				margin-bottom: 16rpx;

				.time-l {
					margin-right: 15rpx;
				}
			}

			.code-number {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 16rpx;

				.code-used {
					font-weight: 400;
					font-size: 24rpx;
				}
			}

			.code-number1 {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;

				.number-ty1 {
					color: #7F7F7E;
					font-weight: 400;
					text-decoration: line-through
				}

				.code-used1 {
					color: #7F7F7E;
					font-size: 24rpx;
				}
			}

		}

		// 店家
		.business {
			background: #FFFFFF;
			margin-top: 24rpx;
			border-radius: 16rpx;
			padding: 24rpx;

			.bus-cont {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.bus-name {
					font-size: 30rpx;
					font-weight: bold;
				}

				.bus-lx {
					display: flex;
					align-items: center;
					font-size: 26rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}

			.bus-yingye {
				color: #707070;
				font-size: 24rpx;
				margin-bottom: 10rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			.bus-addres {
				color: #707070;
				font-size: 24rpx;

				image {
					width: 22rpx;
					height: 29rpx;
					margin-right: 10rpx;
				}
			}
		}

		//到店吃套餐
		.foodPackEat {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 5rpx 24rpx 24rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			margin-top: 24rpx;

			.eat-title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.food-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 24rpx;
			}

			.food-list {

				.food-item {
					display: flex;
					justify-content: space-between;

					.food-left {
						font-size: 28rpx;

						.item-num {
							font-size: 26rpx;
							color: #989898;
						}
					}

					.food-right {
						font-size: 30rpx;
					}
				}
			}
		}

		.reminder {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 24rpx;

			.rem-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 36rpx;
			}

			.rem-cont {
				.rem-item {
					font-size: 28rpx;
					color: #1D1D1D;
					display: flex;
					justify-content: flex-start;
					margin-bottom: 24rpx;

					.item-k {
						color: #7E7E7D;
						width: 20%;
					}

					.item-v {
						width: 80%;
					}

					.item-vlist {
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: center;
						line-height: 50rpx;
					}
				}
			}
		}

		// 订单信息
		.order-info {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 24rpx;

			.order-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 36rpx;
			}

			.order-cont {
				.order-item {
					font-size: 28rpx;
					color: #1D1D1D;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 24rpx;

					.order-ik {
						color: #7E7E7D;
						width: 20%;
					}

					.order-iv {
						width: 80%;

						.order-icopy {
							color: #1D1D1D;
							margin-left: 16rpx;
							padding: 2rpx 5rpx;
							background: #E5E5E5;
						}
					}



				}
			}
		}

	}
	.bnts-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
		border-radius: 0px 0px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		.bnrt {
			text-align: center;
			line-height: 72rpx;
			width: 686rpx;
			height: 72rpx;
			background: #35743D;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
